<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示</title>
</head>
<body>
<div id="mountNode"></div>

</body>
<script src="g2.js"></script>
<script>
  const data = [
    { year: '1951 年', sales: 38 ,remark:'我是你爸爸'},
    { year: '1952 年', sales: 52,remark:'我是你妈妈' },
    { year: '1956 年', sales: 61 ,remark:'我是你姐姐'},
    { year: '1957 年', sales: 145,remark:'我是你哥' },
    { year: '1958 年', sales: 48,remark:'我是你弟弟' },
    { year: '1959 年', sales: 38,remark:'我是你老公' },
    { year: '1960 年', sales: 38 ,remark:'我是你脑瓜子'},
    { year: '1962 年', sales: 38,remark:'我是你爷爷' },
  ];
  const chart = new G2.Chart({
    container: 'mountNode',
    autoFit: false,
    width: 400,
    height: 300,
  });
  chart.tooltip({
      showCrosshairs: true, // 不展示 tooltip markers
      shared: true,
      showTitle:false,
      itemTpl:'<h1>{year}{remark}赚了{sales}钱</h1>'
  })
  chart.interaction('active-region');
  chart.data(data);
  chart.scale('sales', {
    alias: '销售量',
    ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
    formatter: (val) => `￥${val}`,
    min:0,
    max:200,
    tickCount:10,
    tickInterval: 100,
  });
  chart.scale('year',{
    // range:[0.25,0.75]
  })
  chart.axis('sales', {

  });
  chart.scale('remark',{
      alias:'备注'
  })

  // chart.interval().position('year*sales'); //柱状图
  chart.line().position('year*sales').tooltip('year*remark*sales',(year,remark,sales,)=>{
      return {
          year:`${year}的第一场雪`,
          remark:remark,
          sales:`${sales}块钱`,


      }
  }).label('sales',{ //配置标签
      type:'polar'
  })

  //折线图



  chart.render();
</script>
</html>
